@import '../common/style/base.less';

@backtop: ~'@{prefix}-back-top';
@back-top-text-font-size: @font-size;
@back-top-text-line-height: 24rpx;
@back-top-icon-font-size: 44rpx;
@back-top-round-width: 96rpx;
@back-top-half-round-width: 120rpx;
@back-top-half-round-height: 80rpx;
@back-top-fixed-right: @spacer;
@safe-area-inset-bottom: constant(safe-area-inset-bottom);
@safe-area-inset-bottom: env(safe-area-inset-bottom);
@back-top-fixed-bottom: calc(@spacer-2 + @safe-area-inset-bottom);
@back-top-round-color: var(--td-back-top-round-color, @text-color-primary);
@back-top-round-bg-color: var(--td-back-top-round-bg-color, @bg-color-container);
@back-top-round-border-color: var(--td-back-top-round-border-color, @component-border);
@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); // 'round'主题圆角大小
@back-top-round-dark-color: var(--td-back-top-round-dark-color, @text-color-anti); // 'round-dark'主题内容颜色
@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-13); // 'round-dark'主题背景颜色
@back-top-half-round-border-radius: var(
  --td-back-top-half-round-border-radius,
  @radius-round
); // 'round-dark'主题圆角大小

.@{backtop} {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  overflow: hidden;
  box-sizing: border-box;
  transition: height 0.2s;
  height: auto;

  &--fixed {
    position: fixed;
    right: @back-top-fixed-right;
    bottom: @back-top-fixed-bottom;
  }

  &--round,
  &--round-dark {
    width: @back-top-round-width;
    height: @back-top-round-width;
    border-radius: @back-top-round-border-radius;
  }

  &--round,
  &--half-round {
    color: @back-top-round-color;
    border: 1rpx solid @back-top-round-border-color;
    background-color: @back-top-round-bg-color;
  }

  &--round-dark,
  &--half-round-dark {
    color: @back-top-round-dark-color;
    background-color: @back-top-round-dark-bg-color;
  }

  &--half-round,
  &--half-round-dark {
    width: @back-top-half-round-width;
    height: @back-top-half-round-height;
    border-radius: 0;
    border-top-left-radius: @back-top-half-round-border-radius;
    border-bottom-left-radius: @back-top-half-round-border-radius;
    flex-direction: row;
    right: 0;
  }

  &__text--round,
  &__text--round-dark,
  &__text--half-round,
  &__text--half-round-dark {
    font-size: @back-top-text-font-size;
    line-height: @back-top-text-line-height;
  }

  &__text--half-round,
  &__text--half-round-dark {
    width: 48rpx;
  }

  &__icon:not(:empty) + &__text--half-round,
  &__icon:not(:empty) + &__text--half-round-dark {
    margin-left: 8rpx;
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: @back-top-icon-font-size;
  }
}
